<template>
	<div class="body">
		<view class="content">
      <div class="li">
        <div class="title">姓名</div>
        <input type="text" v-model="userInform.name" placeholder="请输入姓名">
      </div>
      <div class="li">
        <div class="title">真实姓名</div>
        <input type="text"  v-model="userInform.realName" placeholder="请输入真实姓名">
      </div>
			<div class="li">
				<div class="title">手机号</div>
				<input type="tel"   v-model="userInform.phone" placeholder="请输入手机号">
			</div>
			<div class="li">
				<div class="title">验证码</div>
				<div class="code">
					<input type="number" v-model="userInform.code" placeholder="请输入短信验证码">
					<div class="getcode" v-if="codeshow" @click="getcode">获取</div>
					<div class="getcode" v-else >{{codes}}s</div>
				</div>
			</div>
		</view>
		<div class="btn" v-if="buttonShow" @click="confirm">确认修改</div>
	</div>
</template>

<script>
import Api from "../../API/api";
	export default {
		data() {
			return {
				codes: "60",
				codeshow: true,
        userInform:{
          name:"",
          realName:"",
          phone:"",
          code:""
        },
        buttonShow: true,
        windowHeight:""

			}
		},
		onLoad() {
      let a = uni.getStorageSync('userInform');
      this.userInform.realName = a.realName;
      this.userInform.phone = a.phone;
      this.userInform.name = a.name;
      console.log(a)
      uni.removeStorageSync('userInform');

      uni.getSystemInfo({
        success: (res)=> {
          this.windowHeight = res.windowHeight;
        }
      });
      uni.onWindowResize((res) => {
        if(res.size.windowHeight < this.windowHeight){
          this.buttonShow = false
        }else{
          this.buttonShow = true
        }
      })
    },

		methods: {

			// 获取验证码
			getcode() {
        Api.getcode(this.userInform.phone).then(res=>{
          // this.userInform.code = res.data;
          console.log("发送成功")
        }).catch(x=>{

        })
				this.codeshow = false
				this.codes = 60
				setInterval(() => {
					this.codes--
				}, 1000)
				if (this.codes == 1) {
					this.codeshow = true
					this.codes = 60
				}
			},
      confirm(){
        if (this.userInform.code === null|| this.userInform.code === ""){
          uni.showToast({
            title: '请输入验证码',
            icon: 'fail'
          })
          return;
        }
        console.log(this.userInform)
        Api.agentAddUser(this.userInform).then(res=>{
          console.log("修改成功")
          console.log(res)
          uni.navigateTo({
            url: '/pages/index/index'
          })
          // setTimeout(() => {
          //   uni.showToast({
          //     title: '授权中',
          //     icon: 'loading',
          //     duration : 3000
          //   })
          // }, 1000);
        })
      }
		}
	}
</script>

<style lang="less" scoped>
	.content {
		width: 90%;
		box-sizing: border-box;
		margin: 30rpx auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;

		.li {
			.title {
				color: #aaa;
				margin: 20rpx;
			}

			input {
				background-color: #f5f6fa;
				padding: 20rpx;
				border-radius: 80rpx;
				text-indent: 1em;
			}

			.code {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.getcode {
					width: 160rpx;
					height: 80rpx;
					border-radius: 48rpx;
					border: 2rpx solid #FD9509;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #FD9509;
				}
			}

		}
	}

	.btn {
    width: 520rpx;
    height: 96rpx;
    background: linear-gradient(180deg, #FFBE00FF 0%, #FFC200FF 100%);
    border-radius: 48rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 50rpx;
    left: 50%;
    transform: translateX(-50%);
    color: #FFFFFF;
	}
</style>